<template>
	<view class="viewport deduct-tabbar default-bgcolor lawyer-page">
		<view class="header" :style="headerStyle">
			<!-- <view class="header__search">
				<image class="header__search__icon" src="/static/image/lawyer/search.icon.png"></image>
			</view> -->
			<view class="header__title">列表</view>
		</view>
		<view class="tabs">
			<image v-if="activeTab === 'lawyer'" src="/static/image/lawyer/tabs.lawyer.png"></image>
			<image v-if="activeTab === 'law'" src="/static/image/lawyer/tabs.law.png"></image>
			<!-- 			<image class="tabs__bg" src="/static/image/lawyer/tabs.bg.png"></image> -->
			<view :class="['tabs__item',{active:activeTab === 'lawyer'}]" @click.stop="tapSwitchTab('lawyer')">
			</view>
			<view :class="['tabs__item',{active:activeTab === 'law'}]" @click.stop="tapSwitchTab('law')">
			</view>
		</view>
		<view class="search">
			<!-- <view class="search__condition" @click="tapFiltrate">
				<view class="search__condition__text ellipsis">
					{{region}}
				</view>
				<image class="search__condition__icon" src="/static/image/lawyer/arrow.bottom.png"></image>
			</view> -->

			<Region v-model="queryParams.districtId" @confirm="refresh">
				<template #default="{region}">
					<view class="search__condition">
						<view class="search__condition__text ellipsis">
							{{region.text === '不限'?'区域':region.text}}
						</view>
						<image class="search__condition__icon" src="/static/image/lawyer/arrow.bottom.png"></image>
					</view>
				</template>
			</Region>

			<view class="search__condition" @click="openSpecialPopup">
				<view class="search__condition__text ellipsis">{{expertise.text=== '不限'?'擅长':expertise.text}}</view>
				<image class="search__condition__icon" src="/static/image/lawyer/arrow.bottom.png"></image>
			</view>
			<!-- 		<picker @change="changeExpertise" :value="expertise.index" range-key="dictValue" :range="expertiseList">
				<view class="search__condition">
					<view class="search__condition__text ellipsis">{{expertise.text=== '不限'?'擅长':expertise.text}}</view>
					<image class="search__condition__icon" src="/static/image/lawyer/arrow.bottom.png"></image>
				</view>
			</picker> -->
		</view>

		<view class="body">
			<ScrollRefresher @refresh="refresh" @tolower="tolower">
				<view v-for="item of list" :key="item.lawFirmId" class="lawyer-item"
					@click="tapToDetail(item.lawFirmId)">
					<view class="lawyer-item__icon">
						<image mode="aspectFill" :src="item.lawFirmLogo"></image>
						<view class="online"></view>
					</view>
					<view class="lawyer-item__info">
						<view class="follow" :class="{'follow--highlight':!(isLogin() && item.follow == '1')}"
							@click.stop="tapFollow(item)">
							{{isLogin() && item.follow == '1' ?'已关注':'关注'  }}
						</view>
						<view class="lawyer-item__info__main" style="width:360rpx;">{{item.lawFirmName}}</view>
						<template v-if="item.lawFirmType == 1">
							<view class="lawyer-item__info__desc">
								<template v-if="item.certification == 1">
									执业律师<text>|</text>
								</template>执业{{item.practice}}年
							</view>
							<!-- 律师 -->
							<view class="lawyer-item__info__advantage">
								<view class="advantage-tag">擅长</view>
								<view class="advantage-list">
									<view class="ellipsis">{{item.special}}</view>
								</view>
							</view>
						</template>
						<!-- 律所 -->
						<view v-else class="lawyer-item__info__advantage">
							<view class="advantage-tag">简介</view>
							<view class="advantage-list">
								<view class="ellipsis">{{item.lawFirmDesc}}</view>
							</view>
						</view>
					</view>
				</view>
			</ScrollRefresher>
		</view>
	</view>
	<LoginPopup @success="refresh"></LoginPopup>
	<SpecialPopup ref="specialPopupRef" v-model="expertise.text" @change="changeExpertise"></SpecialPopup>

</template>

<script lang="ts" setup>
	import Region from '@/components/region/region.vue';
	import type { AnyObj } from '@/types/global';
	import type { BoundingRect } from '@/hooks/bounding-rect';
	import { inject, computed, ref, getCurrentInstance, onMounted, nextTick } from 'vue';
	import { setTabbar } from '@/utils/wx';
	import { getBoundingClientRect } from '@/utils/node';
	import { isLogin } from '@/utils/auth';
	import { getLawfirmList, getLawfirmExpertiseList } from '@/apis/lawfirm';
	import { useGetDataPaging } from '@/hooks/paging';
	import { onShow } from '@dcloudio/uni-app';
	import { saveUnfollow, saveFollow } from '@/apis/auth';
	import SpecialPopup from '@/components/special-popup/special-popup.vue';
	import { usePopup } from '@/hooks/popup';

	const [specialPopupRef, { openPopup: openSpecialPopup }] = usePopup();

	setTabbar({ selected: 2 });

	const expertise = ref({
		text: '不限',
		index: 0
	});
	const queryParams = ref({
		districtId: '',
		special: ''
	});
	const expertiseList = ref<AnyObj[]>([]);
	const currentInstance = getCurrentInstance();
	const boundingRect = inject<BoundingRect>('boundingRect') as BoundingRect;
	const activeTab = ref('lawyer');
	const headerStyle = computed(() => {
		return {
			height: boundingRect.navbarStyle.height,
			paddingTop: boundingRect.navbarStyle.paddingTop,
			// paddingRight: boundingRect.navbarStyle.paddingRight
		}
	});

	const localityFiltratePopupTop = ref('0px');

	onMounted(async () => {
		await nextTick();
		getBoundingClientRect(currentInstance, '.search__condition').then((rect : UniApp.NodeInfo) => {
			localityFiltratePopupTop.value = `${(rect as any).bottom + 10}px`;
		});
	});

	const { list, refresh, tolower } = useGetDataPaging({
		api: getLawfirmList,
		params: () => {
			return {
				lawFirmType: activeTab.value === 'lawyer' ? 1 : 2,
				...queryParams.value
			}
		}
	});



	function tapSwitchTab(selectedTab : string) {
		activeTab.value = selectedTab;
		refresh();
	}

	function changeExpertise(special : string) {
		expertise.value.text = special;
		queryParams.value.special = special === '不限' ? '' : special;
		refresh();
	}


	onShow(() => {
		refresh();
	});

	function tapToDetail(lawFirmId : string) {
		if (activeTab.value === 'lawyer') {
			uni.navigateTo({
				url: `/pages-lawyer/lawyer-detail/lawyer-detail?lawFirmId=${lawFirmId}`
			})
			return;
		}
		uni.navigateTo({
			url: `/pages-lawyer/law-detail/law-detail?lawFirmId=${lawFirmId}`
		})
	}

	function tapFollow(item : AnyObj) {
		if (item.follow == '1') {
			saveUnfollow(item.lawFirmId).then((res) => {
				if (res.code !== 200) {
					uni.showToast({
						icon: 'none',
						title: res.msg ?? '服务器忙，请稍后再试'
					});
					return;
				}
				item.follow = "0";
				uni.showToast({
					icon: 'none',
					title: '已取消'
				});
			});
			return;
		}

		saveFollow(item.lawFirmId).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
			item.follow = "1";
			uni.showToast({
				icon: 'none',
				title: '已关注'
			});
		});
	}
</script>

<style lang="scss">
	.lawyer-page {
		.header {
			display: inline-flex;
			flex-shrink: 0;
			width: 100%;
			box-sizing: border-box;

			&__search {
				display: inline-flex;
				align-items: center;
				height: 100%;
				padding-left: 30rpx;
				box-sizing: border-box;

				&__icon {
					display: inline-flex;
					width: 49rpx;
					height: 49rpx;
				}
			}

			&__title {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 36rpx;
				color: #000000;
			}
		}

		.tabs {
			position: relative;
			display: inline-flex;
			align-items: flex-end;
			width: 100%;
			height: 80rpx;
			margin-top: 30rpx;
			box-sizing: border-box;

			image {
				width: 750rpx;
				height: 80rpx;
			}

			&__item {
				position: absolute;
				top: 0;
				left: 0;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 375rpx;
				height: 80rpx;

				&:last-child {
					left: inherit;
					right: 0;
				}
			}
		}

		.search {
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 80rpx;
			padding: 28rpx 30rpx 4rpx 28rpx;
			box-sizing: border-box;
			background: white;

			&__condition {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 48rpx;
				padding: 0 42rpx;
				box-sizing: border-box;
				background: #F6F6F6;
				border-radius: 42rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #101010;

				&__text {
					max-width: 220rpx;
				}

				&__icon {
					position: relative;
					display: inline-flex;
					width: 21rpx;
					height: 21rpx;
					margin-left: 16rpx;
				}
			}
		}

		.body {
			position: relative;
			display: flex;
			flex: 1;
			overflow: hidden;
			background-color: white;
			box-sizing: border-box;
		}
	}
</style>